import React, { } from 'react'
import { Row, Col } from 'antd'
import { backgroundObj } from '@/utils/utils'
import { SearchOutlined } from '@ant-design/icons'
import './index.less'
const Search = (props) => {
    const { data = {} } = props
    const {
        title,
        radiusType,
        position,
        fontColor,
        iconColor,
        searchColor,
        top,
        bottom,
        paddingTop,
        paddingLeft,
        backgroundType,
        backgroundColor,
        backgroundImage,
        borderRadius
    } = data
    const renderBg = () => {
        if (backgroundType !== 'image') {
            return {
                background: backgroundColor
            }
        } else {
            return {
                ...backgroundObj(backgroundImage)
            }
        }
    }
    return <div style={{ padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, ...renderBg() }} className='Search_body_box'>
        <div style={{ background: searchColor, justifyContent: position, borderRadius: radiusType === 'rightAngle' ? 'none' : borderRadius }} className='Search_box'>
            {
                position === 'space-between' ? <>
                    <div style={{ paddingLeft: 24, color: fontColor }}>
                        {title}
                    </div>
                    <div style={{ paddingRight: 24, color: iconColor }}>
                        <SearchOutlined></SearchOutlined>
                    </div>

                </> : <>
                    <div style={{ paddingLeft: 24, color: iconColor }}>
                        <SearchOutlined></SearchOutlined>
                    </div>
                    <div style={{ paddingLeft: 8, color: fontColor }}>
                        {title}
                    </div>
                </>
            }
        </div>
    </div>
}
export default Search